<template>
  <!-- 修改邮箱 -->
  <view>
    <!-- 邮箱验证码 -->
    <uni-popup ref="modifyEmail">
      <uni-popup-dialog
          type="info"
          cancelText="取消"
          confirmText="确认"
          title="修改邮箱"
          @close="cancel"
          @confirm="submitEmailCode"
          before-close>
        <template v-slot="content">
          <view style="font-size: 26rpx;">验证码将发送至邮箱：{{ user.emailHide }}</view>
          <uni-forms
              ref="from"
              :modelValue="form"
              :rules="rules"
              :label-width="0" type="line" label-align="right"
              class="paddingAll">
            <uni-forms-item label="" name="smsCode" :required="true">
              <view class="smscode_flex">
                <uni-easyinput placeholder="请输入邮箱验证码" type="number" maxlength="6" v-model="smsCode"></uni-easyinput>
                <button class="code_btn" @click="getEmailCode" v-if="showEmailCode">{{ counter }}</button>
                <button class="code_graybtn" v-else>{{ counter }}</button>
              </view>
            </uni-forms-item>
          </uni-forms>
        </template>
      </uni-popup-dialog>
    </uni-popup>

    <!-- 新邮箱验证码 -->
    <uni-popup ref="modifyEmailNew">
      <uni-popup-dialog
          type="info"
          cancelText="取消"
          confirmText="确认"
          title="新邮箱"
          @close="cancel"
          @confirm="submitEmailCode"
          before-close>
        <template v-slot="content">
          <view style="font-size: 26rpx;">验证码将发送至邮箱：{{ user.emailHide }}</view>
          <uni-forms ref="emailForm" :rules="emailRules" :modelValue="emailForm" class="form" labelWidth="100rpx">
            <uni-notice-bar
                single color="#00a660"
                background-color="#e6f6ef"
                style="margin-top: 20rpx"
                text="请填写邮箱账号，并进行验证。"
            />
            <uni-forms-item label="新邮箱" required name="email">
              <uni-easyinput placeholder="请输入新邮箱" v-model="emailForm.email"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item label="验证码" required name="emailCode">
              <view class="smscode_flex">
                <uni-easyinput
                    placeholder="请输入邮箱验证码"
                    type="number"
                    maxlength="6"
                    v-model="emailForm.emailCode"
                ></uni-easyinput>
                <button class="code_btn" @click="getEmailCode" v-if="showEmailCode">{{ counter }}</button>
                <button class="code_btn" v-else>{{ counter }}</button>
              </view>
            </uni-forms-item>
          </uni-forms>
        </template>
      </uni-popup-dialog>
    </uni-popup>


  </view>
</template>

<script>

import {checkEmailCode, getEmailCode} from "@/api/ec/person/user/userInfo";

export default {
  data() {
    return {
      // 表单
      user: {},
      // 验证码按钮显示
      showEmailCode: true,
      // 获取验证码文字
      counter: '获取验证码',
      // 验证码
      smsCode: '',

      emailType: 1,
      // 表单
      form: {},
      // 表单校验
      rules: {
        smsCode: {
          rules: [
            {required: true, errorMessage: '请输入邮箱验证码'}
          ]
        },
      },

      // -------------- 修改邮箱 -----------------
      emailForm: {},
      emailRules: {
        email: {
          rules: [{
            required: true,
            errorMessage: '邮箱不能为空'
          },
            {
              pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
              errorMessage: '请输入正确的邮箱'
            }]
        },
        emailCode: {
          rules: [{
            required: true,
            errorMessage: '验证码不能为空'
          }, {
            format: 'number',
            errorMessage: '验证码只能输入数字'
          }]
        },
      },
    }
  },
  created() {
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog(user) {
      this.user = user;
      this.toShowModifyEmail();
    },
    /** 取消按钮 */
    cancel() {
      this.smsCode = ''
      this.$refs.modifyEmail.close()
      this.$refs.modifyEmailNew.close()
    },
    /** 修改邮箱出框 */
    toShowModifyEmail() {

      let emailType;
      if (this.user.email == null || this.user.email == '') {
        emailType = 1;
      } else {
        emailType = 2;
      }

      this.emailType = emailType
      this.$refs.modifyEmailNew.open('center')


      // // 1设置 2修改
      // // 修改邮箱 弹出邮箱验证码验证身份
      // if (emailType == 2) {
      //   this.emailType = emailType
      //   this.$refs.modifyEmail.open('center')
      // } else {
      //   // // 设置邮箱
      //   // uni.navigateTo({
      //   //   url: './editProfile?emailType=' + emailType
      //   // })
      // }
    },
    /** 获取邮箱验证码 */
    getEmailCode() {
      this.showEmailCode = false
      this.counter = 10;
      setInterval(() => {
        this.counter--;
        if (this.counter === 0) {
          this.showEmailCode = true
          this.counter = '重新发送';
        }
        clearInterval();
      }, 1000);
      let email = this.user.email;
      let emailType = this.emailType;
      const param = {email, emailType}
      this.$modal.loading();
      getEmailCode(param).then(response => {
        uni.hideLoading()
        this.$modal.msgSuccess("验证码已发送到您邮箱，请注意查收");
      })
    },
    /** 提交邮箱验证码 */
    submitEmailCode() {
      this.$refs.from.validate().then(res => {
        let email = this.user.email;
        let emailType = this.emailType;
        let emailCode = this.smsCode;
        const param = {email, emailType, emailCode}
        checkEmailCode(param).then(response => {
          this.cancel();
          uni.navigateTo({url: './editProfile?emailType=' + 3});
        })
      });
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-forms-item .is-required {
  display: none;
}

::v-deep .uni-forms-item__label {
  padding: 0;
}

::v-deep .uni-popup-dialog {
  width: 85%;
}

::v-deep .uni-dialog-content {
  padding: 26rpx;
}

.smscode_flex {
  display: flex;
  align-items: center;
  margin-top: 15rpx;

  .code_btn {
    background: $uni-color-primary;
    color: #fff;
    padding: 4rpx 0;
    width: 170rpx;
    font-size: 26rpx;
    margin-left: 10rpx;
  }

  .code_graybtn {
    background: #cccccc;
    color: #fff;
    padding: 4rpx 0;
    width: 170rpx;
    font-size: 26rpx;
    margin-left: 10rpx;
  }
}
</style>
